<template>

<div style="height:100%;max-height: 100%;">
    <div class="topic col-sm-12 col-md-12">
        <a href="security.html">返回</a>
        <span>安防设备配置</span>
    </div>

    <div class='panel'>
        <div class='left-panel'>
                <h3>配置流程</h3>
                <svg width="160px" height="1000px" version="1.1"
                xmlns="http://www.w3.org/2000/svg">
                <circle cx="60" cy="60" r="20" stroke="white"
                stroke-width="4"    :fill="$store.state.step == 1 ? '#0087d4' : '#f1f1f1'"   />
                <text x="90" y="60">选择门店</text>
                
                <circle cx="60" cy="150" r="20" stroke="white"
                stroke-width="4"    :fill="$store.state.step == 2 ? '#0087d4' : '#f1f1f1'"   />
                <text x="90" y="150">配置主机</text>

                <circle cx="60" cy="240" r="20" stroke="white"
                stroke-width="4"    :fill="$store.state.step == 3 ? '#0087d4' : '#f1f1f1'"  />
                <text x="90" y="240">配置NVR</text>

                <circle cx="60" cy="330" r="20" stroke="white"
                stroke-width="4"    :fill="$store.state.step == 4 ? '#0087d4' : '#f1f1f1'"  />
                <text x="90" y="330">上传平面图</text>

                <circle cx="60" cy="420" r="20" stroke="white"
                stroke-width="4"    :fill="$store.state.step == 5 ? '#0087d4' : '#f1f1f1'"  />
                <text x="90" y="420">添加防区</text>

                <circle cx="60" cy="510" r="20" stroke="white"
                stroke-width="4"    :fill="$store.state.step == 6 ? '#0087d4' : '#f1f1f1'"  />
                <text x="90" y="510">添加视频</text>

                <circle cx="60" cy="600" r="20" stroke="white"
                stroke-width="4"    :fill="$store.state.step == 7 ? '#0087d4' : '#f1f1f1'"  />
                <text x="90" y="600">完成配置</text>

                <line x1="60" y1="80" x2="60" y2="130"
                style="stroke:#cbcbcb;stroke-width:2"/>
                <line x1="60" y1="170" x2="60" y2="220"
                style="stroke:#cbcbcb;stroke-width:2"/>
                <line x1="60" y1="260" x2="60" y2="310"
                style="stroke:#cbcbcb;stroke-width:2"/>
                <line x1="60" y1="350" x2="60" y2="400"
                style="stroke:#cbcbcb;stroke-width:2"/>
                <line x1="60" y1="440" x2="60" y2="490"
                style="stroke:#cbcbcb;stroke-width:2"/>
                <line x1="60" y1="530" x2="60" y2="580"
                style="stroke:#cbcbcb;stroke-width:2"/>
                </svg>
        </div>
        <div class="right-panel">
            <router-view> </router-view>
        </div>
    </div>
    <footer>
		<p>©WESINE2018. 微晟(武汉)技术有限公司</p>
		<p>
			<img :src='logo2' id="footerLogo">
		</p>
	</footer>
</div>
</template>
<script>

import selectShop from '@/configdev/selectShop'
import logo2 from "./assets/logo2.png"
import { State, initState} from './store'

export default { 
    name: 'app',
    data () {
        return {
            logo2 : logo2
        }
    },
    created(){
        this.$router.push( { name: "selectShop"})
    }
}
</script>
<style scoped>
*{
    overflow: hidden;
}
.topic a{
    font-size: 24px;
    display: inline-block;
    height: 60px;
    margin-top: 20px;
    line-height: 60px;
    text-indent: 50px;
    color: white;
}
.topic span{
    font-weight: bold;
    font-size: 36px;
    display: inline-block;
    height: 60px;
    margin-top: 20px;
    letter-spacing: 10px;
    margin-left: 200px;
    line-height: 60px;
    color: white;
}
.topic{ 
    background-color: #0087da;
    height: 100px;
}
.panel{
    width: 100%;
    display: block;
    height: calc(800px);
    margin-bottom: 0px;
}
.left-panel{ 
    float: left;
    width: 200px;
    margin-left:0px;
    height: 100%;
}
h3{
    font-size: 24px;
    text-align: center;
    margin: 0px;
    padding: 0px;
    padding-top: 50px;
}



.right-panel{
    display:relative;
    overflow: auto;
    max-height: 100%;
    height: 100%;
}

footer p:nth-child(1){
    height: 50px;
    text-align: center;
    font-size: 14px;
    line-height: 50px;
    color: white;
    margin: 0px;
    background-color: #4C8ADD;
}
footer p:nth-child(2){
    height: 100px;
    margin: 0px;
    position: relative;
    background-color: #3D7BD0;
   
}
footer p img{
    display:block;
    width: 270px;
    height: 54px;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}
</style>

